<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="shortcut icon" href="/blog/Public/favicon.ico" type="image/x-icon" />
    <title>{$data.title} - 一个前端程序员的个人博客！</title>
    <meta name="keywords" content="小木鱼,小木鱼博客,birongsen,前端工程师,博客,thinkphp"/>     
    <meta name="description" content="分享前端、JavaScript、ThinkPHP和web的各个细节上的点点滴滴，愿与你共同分享，一起进步！"/>
    <include file="Public:css" />
    <link rel="stylesheet" href="__PUBLIC__/plugins/editor-md/css/editormd.css">
    <include file="Public:js" />
</head>
<body style="padding-top:15px;">
    <include file="Public:header" />
    <div id="BRS">
        <section class="content">
            <div class="article-detail">
                <div class="article-detail-header">
                    <if condition="$data.thumb eq ''">
                        <div class="header-cover"></div>
                    <else/>
                        <div class="header-cover">
                            <div class="pic" style="width: 100%;height:100%;background-size: cover;background-position:center;opacity: .2;background-image: url({$data.thumb});"></div>
                        </div>
                    </if>
                    <div class="info">
                        <div class="info2">
                            <div class="title">{$data.title}</div>
                            <div class="abstract">
                                <span>{$data.abstract}</span>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="article-detail-body">
                    <div class="caption">                 
                        <h1>{$data.title}</h1>                 
                        <p>发布时间：<span>{$data.str_add_time}</span></p>             
                    </div>
                    <!-- <div class="has-pwd">
                        <div class="box">
                            <input type="password" id="pwd" placeholder="该文章内容需要密码才能阅读">
                            <a href="javascript:;" id="btnView">查看</a>
                        </div>
                    </div> -->
                    <div class="article">
                        <div id="test-editormd-view" style="padding:0;">
                            <textarea id="append-test" style="display:none;">{$data.content_md}</textarea>
                        </div>
                    </div>
                    <div class="article-footer">
                        <p><strong>转载请注明来源：</strong><script type="text/javascript">document.write(window.location.href);</script></p>
                    </div>
                    <div id="maocomment"></div>
                </div>
                <div class="comment">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>评论屌一点，BUG少一点！</legend>
                        <div class="layui-field-box">
                            <div class="layui-form">
                                <input type="hidden" name="article_id" value="{$data.id}">
                                <div class="layui-form-item">
                                    <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" style="background-color: #01AAED;" lay-submit lay-filter="gocomment">提交评论</button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="comment-list">
                        <div class="title">最新评论</div>
                        <empty name="comment_list">
                            <div class="empty">暂无评论</div>
                        </empty>
                        <volist name="comment_list" id="vo">
                            <div class="item">
                                <img src="{$vo.head_pic}" alt="{$vo.nickname}">
                                <div class="title2">
                                    <span class="name left">{$vo.nickname}</span>
                                    <!-- <span class="left" style="color:#999;">账号已封</span> -->
                                    <span class="time right">{$vo.str_add_time}</span>
                                </div>
                                <div class="comment-content">{$vo.content}</div>
                                <volist name="vo.comment_reply_list" id="vo2">
                                    <div class="comment-reply">
                                        <img src="{$vo2.head_pic}" alt="{$vo2.nickname}">
                                        <div class="reply-content">
                                            <span style="color:#01AAED;">{$vo2.nickname}</span><span style="padding:2px 3px;background-color:#01AAED;color:#fff;border-radius: 2px;margin-left:5px;">博主</span>：
                                            <span>{$vo2.content}</span>
                                        </div>
                                        <div class="reply-time">{$vo2.str_add_time}</div>
                                    </div>
                                </volist>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <include file="Public:footer" />
    <!--小屏幕底部-->
    <div class="sm_footer">
        <nav>
            <li>
                <a href="{:U('/')}"><span><i class="iconfont icon-shouye"></i></span>博客</a>
            </li>
            <li>
                <a href="#maocomment"><span><i class="layui-icon">&#xe63a;</i></span>评论</a>
            </li>
            <empty name="user">
                <li>
                    <a href="javascript:;" class="userLoginBtn"><span><i class="iconfont icon-dengluyemianyonghuming"></i></span>我的</a>
                </li>
            <else />
                <li>
                    <a href="javascript:;" class="myInfo"><span><i class="iconfont icon-dengluyemianyonghuming"></i></span>我的</a>
                </li>
            </empty>
        </nav>
    </div>
    <!--小屏幕底部-->
</body>
<script type="text/javascript" src="__PUBLIC__/plugins/jquery/jquery.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/marked.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/prettify.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/raphael.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/underscore.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/sequence-diagram.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/flowchart.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/lib/jquery.flowchart.min.js"></script>
<script src="__PUBLIC__/plugins/editor-md/editormd.js"></script>
<script type="text/javascript">
    layui.use(['jquery','form','layer'],function(){
        var $=layui.jquery,
            layer = layui.layer,
            form=layui.form;

        editormd.emoji = {
            path  : "__PUBLIC__/plugins/editor-md/plugins/emoji-dialog/emoji/",
            ext   : ".png"
        };
        editormd.twemoji = {
            path : "http://twemoji.maxcdn.com/72x72/",
            ext  : ".png"
        };
        testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });

        form.on("submit(gocomment)",function(data){
            var post = {};
            post.article_id = data.field.article_id;
            post.content = data.field.content;
            $.ajax({
                url:"{:U('Article/comment')}",
                data:post,
                type:"POST",
                dataType:'json',
                success:function(data){
                    if( data.status == 0 ){
                        layer.msg(data.msg,{icon:5});
                        return false;
                    }
                    if( data.status == 2 ){
                        layer.open({
                            type: 2,
                            title:'请绑定QQ邮箱',
                            area: ['600px', '220px'],
                            content:"{:U('Article/email')}?user_id="+data.result
                        });
                        return false;
                    }
                    layer.msg(data.msg,{icon:6});
                    setTimeout(function(){
                        parent.location.reload();
                    },500);
                },
                error:function(){
                    layer.msg("网络失败，请刷新页面后重试",{icon:5});
                }
            });
        });
    })
</script>
</html>